<template>
  <div class="app-container" style="padding: 8px;">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-input v-model="fileName" clearable placeholder="输入内容模糊搜索" maxlength="10" style="width: 200px;"
                class="filter-item" @keyup.enter.native="toQuery"/>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
      <!-- 新增 -->
      <div style="display: inline-block;margin: 0px 2px;">
        <el-button
          v-permission="['ADMIN','SYS_TOOL_ALL','SYS_TOOL_ADD']"
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-upload"
          @click="add">文件上传
        </el-button>
      </div>
      <!-- 多选删除 -->
      <div v-permission="['ADMIN','SYS_TOOL_ALL','SYS_TOOL_DELETE']" style="display: inline-block;margin: 0px 2px;">
        <el-button
          :loading="delAllLoading"
          :disabled="data.length === 0 || $refs.table.selection.length === 0"
          class="filter-item"
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="open">删除
        </el-button>
      </div>
    </div>
    <!--表单组件-->
    <eForm ref="form"/>
    <!--表格渲染-->
    <el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;" border>
      <el-table-column type="selection" width="55"/>
      <el-table-column :show-overflow-tooltip="true" prop="fileName" label="文件名">
        <template slot-scope="scope">
          <el-link :underline="false" @click="downSysTool(scope.row)" target="_blank" type="primary">{{
            scope.row.fileName }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="fileType" label="文件类型"/>
      <el-table-column prop="size" label="大小"/>
      <el-table-column prop="upPerson" label="上传人"/>
      <el-table-column prop="upTime" label="上传时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.upTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary"
                     icon="el-icon-download" @click="downSysTool(scope.row)"/>
          <el-popover
            v-permission="['ADMIN','SYS_TOOL_ALL','SYS_TOOL_DELETE']"
            :ref="scope.row.id"
            placement="top"
            width="180">
            <p>确定删除本条数据吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定
              </el-button>
            </div>
            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import checkPermission from '@/utils/permission'
  import initData from '@/mixins/initData'
  import { del, delAll, downLoadFile } from '@/api/business/sysTool/sysTool'
  import { parseTime } from '@/utils/index'
  import eForm from './form'
  import { Notification } from 'element-ui'

  export default {
    components: { eForm },
    mixins: [initData],
    data() {
      return {
        fileName: '',
        delLoading: false, delAllLoading: false
      }
    },
    computed: {
      ...mapGetters([
        'baseApi'
      ])
    },
    created() {
      this.$nextTick(() => {
        this.init()
      })
    },
    methods: {
      parseTime,
      checkPermission,
      beforeInit() {
        this.url = 'api/sysTool'
        this.params = { page: this.page, size: this.size, type: this.$route.query.type, fileName: this.fileName }
        return true
      },
      subDelete(id) {
        this.delLoading = true
        del(id).then(res => {
          this.delLoading = false
          this.$refs[id].doClose()
          this.dleChangePage()
          this.init()
          this.$notify({
            title: '删除成功',
            type: 'success',
            duration: 2500
          })
        }).catch(err => {
          this.delLoading = false
          this.$refs[id].doClose()

        })
      },
      add() {
        this.$refs.form.dialog = true
      },
      doDelete() {
        this.delAllLoading = true
        const data = this.$refs.table.selection
        const ids = []
        for (let i = 0; i < data.length; i++) {
          ids.push(data[i].id)
        }
        delAll(ids).then(res => {
          this.delAllLoading = false
          this.dleChangePage(ids.length)
          this.init()
          this.$notify({
            title: '删除成功',
            type: 'success',
            duration: 2500
          })
        }).catch(err => {
          this.delAllLoading = false
        })
      },
      open() {
        this.$confirm('你确定删除选中的数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doDelete()
        })
      },
      downSysTool(row) {
        this.loading = true
        downLoadFile(row.id).then(res => {
          this.loading = false
          this.download(res, row)
        }).catch((err, data) => {
          this.loading = false
          if (err.response.status === 400) {
            Notification.error({
              title: '下载失败、文件丢失!',
              duration: 2500
            })
          } else {
            Notification.error({
              title: '服务器故障!',
              duration: 2500
            })
          }
        })
      },
      download(data, row) {
        if (!data) {
          return
        }
        const url = window.URL.createObjectURL(new Blob([data]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', row.fileName + '.' + row.fileType)
        document.body.appendChild(link)
        link.click()
      }
    }
  }
</script>

<style scoped>

</style>
